<template>
  <view class="recommended-courses">
    <view class="header">
      <text class="title">推荐课程</text>
      <view class="all-courses" @tap="navToAllCourses">
        <text>全部课程</text>
        <image class="arrow-right" :src="commonStore.baseImageUrl + 'test-yujia/index/arrow-right.png'"
          mode="widthFix" />
      </view>
    </view>

    <view class="course-list">
      <view class="course-item" v-for="(item, index) in list" :key="index" @tap="handleBooking(item)">
        <image class="course-image" :src="item.lessonPhoto" mode="aspectFill" />
        <view class="course-info">
          <view class="course-info-main">
            <view class="course-main">
              <text class="course-name">{{ item.name }}</text>
              <text class="course-tag" :class="item.status === '已约满' ? 'full' : ''">
                {{ getCourseStatus(item.status) }}
              </text>
            </view>
            <rich-text class="course-desc" :nodes="item.lessonAim"></rich-text>
          </view>
          <view class="course-bottom">
            <view class="teacher-info">
              <text class="tag">{{ getCourseType(item.type) }}</text>
              <text class="teacher">{{ item.teacherName }}</text>
              <text class="time">{{ item.startTime }}-{{ item.endTime }}</text>
            </view>
            <view class="booking-btn" :class="item.status === '已约满' || item.joined ? 'disabled' : ''">
             {{ item.joined ? '已预约' : '预 约' }}
            </view>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useCommonStore, useReservationStore } from "@/store";
import { getCourseType, getCourseStatus } from "@/utils/tools";

defineProps({
  list: {
    type: Array,
    default: [],
  },
});
const commonStore = useCommonStore();
const reservationStore = useReservationStore();

const navToAllCourses = () => {
  reservationStore.setReservationType("all");
  uni.switchTab({
    url: "/pages/reservation/reservation",
  });
};

const handleBooking = (course) => {
  if (course.status === "已约满") return;
  // 处理预约逻辑
  console.log("预约课程:", course);
  uni.navigateTo({
    url: `/pages/subpackages/shopCenter/order-payment?courseCode=${course.courseCode}&orderType=2&lessonCode=course.lessonCode`,
  });
};
</script>

<style lang="scss">
.recommended-courses {
  padding: 30rpx 30rpx 50rpx 30rpx;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #0f0f0f;
      position: relative;
    }

    .all-courses {
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      background: #2b2b2b;
      color: #f1f2f1;
      border-radius: 20rpx;
      display: flex;
      align-items: center;

      .arrow-right {
        width: 22rpx;
        height: 22rpx;
      }
    }
  }

  .course-list {
    .course-item {
      display: flex;
      border-bottom: 2rpx solid rgba(#2b2b2b, 0.1);
      padding: 54rpx 0;
      box-sizing: border-box;

      .course-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        background-color: #f5f5f5;
      }

      .course-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .course-main {
          display: flex;
          align-items: center;

          .course-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #343434;
          }

          .course-tag {
            font-size: 15rpx;
            color: #406d46;
            margin-left: 20rpx;
            border: 2rpx solid #d2df82;
            border-radius: 10rpx;
            padding: 6rpx 12rpx;
          }
        }

        .course-desc {
          font-size: 24rpx;
          color: #394621;
          margin: 10rpx 0;
        }

        .course-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .teacher-info {
            display: flex;
            align-items: center;
            gap: 10rpx;
            font-size: 24rpx;
            color: #343434;

            .tag {
              background: #2b2b2b;
              padding: 6rpx 12rpx;
              border-radius: 5rpx;
              color: #ffffff;
              font-size: 16rpx;
              flex-shrink: 0;
            }
          }

          .booking-btn {
            padding: 10rpx 30rpx;
            background: #8cb22c;
            color: #fff;
            border-radius: 30rpx;
            font-size: 24rpx;
            flex-shrink: 0;

            &.disabled {
              background: #ccc;
            }
          }
        }
      }
    }
  }
}
</style>